<template>
	<el-row :gutter="20" justify="space-around" class="user-container">
		<el-col :span="24" class="mb-4">
			<el-card shadow="hover" class="info-card">
				<el-descriptions :column="2" title="个人信息" size="default" border class="custom-descriptions">
					<template #title>
						<div class="description-title">
							<i class="el-icon-user-solid"></i>
							个人信息
						</div>
					</template>

					<el-descriptions-item label="账户名" label-class-name="desc-label" content-class-name="desc-content">
						<el-icon><User /></el-icon>
						{{ userInfo.username }}
					</el-descriptions-item>

					<el-descriptions-item label="昵称" label-class-name="desc-label" content-class-name="desc-content">
						<el-icon><Edit /></el-icon>
						{{ userInfo.nickname }}
					</el-descriptions-item>

					<el-descriptions-item label="当前状态" label-class-name="desc-label" content-class-name="desc-content">
						<el-tag v-if="userInfo.statu === 1" type="success" effect="dark">正常</el-tag>
						<el-tag v-if="userInfo.statu === 2" type="danger" effect="dark">封禁</el-tag>
					</el-descriptions-item>

					<el-descriptions-item label="手机号" label-class-name="desc-label" content-class-name="desc-content">
						<el-icon><Iphone /></el-icon>
						{{ userInfo.phone || '未绑定' }}
					</el-descriptions-item>

					<el-descriptions-item label="邮箱" label-class-name="desc-label" content-class-name="desc-content">
						<el-icon><Message /></el-icon>
						{{ userInfo.email || '未绑定' }}
					</el-descriptions-item>

					<el-descriptions-item label="个人简介" label-class-name="desc-label" content-class-name="desc-content">
						<el-icon><Notebook /></el-icon>
						{{ userInfo.content || '暂无简介' }}
					</el-descriptions-item>
				</el-descriptions>
			</el-card>
		</el-col>

		<el-col :span="24">
			<el-card shadow="hover" class="tabs-card">
				<el-tabs v-model="activeName" class="custom-tabs" tab-position="left" @tab-click="handleClick">
					<el-tab-pane label="个人信息" name="first">
						<template #label>
							<span class="tab-label"><i class="el-icon-document"></i> 个人信息</span>
						</template>
						<Info class="pane-content" />
					</el-tab-pane>

					<el-tab-pane label="修改密码" name="second">
						<template #label>
							<span class="tab-label"><i class="el-icon-lock"></i> 修改密码</span>
						</template>
						<RepassWord class="pane-content" />
					</el-tab-pane>
				</el-tabs>
			</el-card>
		</el-col>
	</el-row>
</template>

<script setup>
import useSystemStore from '@/stores/system'
import pinia from '@/stores/store'
import Info from '@/views/common/information/userInfo.vue'
import RepassWord from '@/views/common/information/repassword.vue'
import { ref } from 'vue'
import { Edit, Iphone, Message, Notebook, Refresh, User } from '@element-plus/icons-vue'

const systemStore = useSystemStore(pinia)
const userInfo = systemStore.userInfo
const activeName = ref('first')
</script>

<style scoped lang="scss"></style>
